<div class="inbox">

  <div class="search-bar">
    <div class="inbox__count">
      You have {{ inbox.messages.length && inbox.messages.length || 'no' }} messages
    </div>
    <div ng-hide="!inbox.messages.length">
      <input type="text" class="inbox__search" 
        ng-model="inbox.search" placeholder="Search by 'from', e.g. TicketMaster">
    </div>

  </div>
  <ul class="inbox__list">
    <li ng-show="!inbox.messages.length" class="no-emails">
      No messages! Try sending one to a friend.
    </li>
    {{inbox.messages}}
    <li ng-repeat="message in inbox.messages | filter:{ from: inbox.search }">
      <div class="inbox__list-info">
        <p class="inbox__list-from"> From: {{ message.from }} </p>
        <p class="inbox__list-date"> {{ message.date | date: 'dd/MM/yyyy' }} </p>
        <a href="" ng-click="inbox.goToMessage(message.id);"><p class="{{message.read?'inbox__list-read':'inbox__list-unread'}}"> {{ message.subject }} </p></a>
      </div>
      <div class="inbox__list-actions">
        <a href="" ng-click="inbox.unread(message.id);">
          unread
        </a>
        <a href="" ng-click="inbox.deleteMessage(id, $index);">
          Delete
        </a>
      </div>
    </li>
  </ul>
</div>